import React, { useState } from 'react';
import Left from './components/Left'
import Right from './components/Right'
import './App.scss'
// 1.注释关键代码
// 2.搭建React环境
// 3.代码逻辑清楚，控制台无明显报错
// 4.组件职责单一，无代组件冗余
// 5.按照左右划分成2个组件
// 6.实现右侧蓝色切换组件的封装
// 7.实现点击开关切换功能
// 8.左侧按钮实现弹性盒+循环排版
// 9.实现左侧点击事件
// 10.点击左侧出现0.2s样式变换效果
// 11.实现键盘事件
// 12.实现点击后打击乐播放效果
// 13.点击左侧不同按钮右侧名称变化
// 14.实现左右组件的通信
// 15.点击Power实现文字消失
// 16.实现Power和右侧组件之间的通信
// 17.利用生命周期shouldComponentUpdate阻止子组件页面重复渲染
// 18.在销毁声明周期中销毁操作
// 19.高度还原页面
// 20.单独录制题目要求的效果视频并使用其他颜色标注实现的功能
import music from './音乐数据'
const App = () => {
  const [list, setList] = useState(music)
  
  const [id, setID] = useState('')

  return (
    <div className="app">
      <Left list={ list } setID={ setID }></Left>
      <Right id={ id }></Right>
    </div>
  );
}

export default App;
